<template>
  <div class="container">
    <el-table :data="data" id="out-table" border style="width: 100%">
      <el-table-column prop="studentName" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="createTime" label="报名时间"></el-table-column>
      <el-table-column prop="phone" label="消耗课时">
        <template slot-scope="scope">
          <span>{{scope.row.usePeriods}}</span> /
          <span>{{scope.row.totalPeriods}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="salesFollowType" label="跟进状态" :formatter="stateFormat"></el-table-column>
      <el-table-column prop="organizationUserName" label="课程顾问"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" disabled @click="PersonnelSee(scope.$index, scope.row)">查看</el-button>
          <el-button type="text" disabled>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pageData: undefined,
      total: 0,
      fengye: 1,
      delVisible: false,
      name: "",
      organizationUserId: "",
      roleNames: "",
      phone: "",
      status: ""
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    // 跟进状态判断
    stateFormat(row, salesFollowType) {
      if (row.salesFollowType === 0) {
        return "暂无跟进";
      } else if (row.salesFollowType === 1) {
        return "新增";
      } else if (row.salesFollowType === 2) {
        return "跟进中";
      } else if (row.salesFollowType === 3) {
        return "已约课";
      } else if (row.salesFollowType === 4) {
        return "已体检";
      } else if (row.salesFollowType === 5) {
        return "停止跟进";
      }
    },
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(
        localStorage.getItem("organizationIds")
      )[0];
      this.url = "/api/user/xzs/student.list.get";
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId: organizationId,
          type: "2"
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          this.tableData = res.data.data.pageList;
          this.tableData.map(function(item) {
            item.createTime = that.timestampToTime(item.createTime);
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    //时间戳转换
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = String(date.getMinutes()).padStart(2, "0");
      return Y + M + D;
    },
    //学员管理点击添加意向学员
    // AddIntentiontrainees() {
    //   this.$router.push({ path: "/home/AddIntentiontrainees", params: { id: "1" } });
    // },
    //故事列表点击详情方法
    PersonnelSee(index, row) {
      this.$router.push({
        path: "/home/PersonnelSee?studentId=" + row.studentId
      });
      location.reload();
    }
  }
};
</script>

<style>
.box {
  padding: 20px;
  background: white;
}
.handle-box {
  margin-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  height: 50px;
  margin-top: -20px;
  border-radius: 5px;
  background: #f4fafa;
}
.handle-input {
  width: 235px;
  display: inline-block;
}
</style>
  